<template>
  <div style="position: relative;">
    <div id="title">
      <span
        @click="dianji(1)"
        :style="{'color':titleId==1?'#000000':'#939699'}"
      >{{roseData.text}}</span>
      <span
        @click="dianji(2)"
        :style="{'color':titleId==2?'#000000':'#939699'}"
      >{{roseData.subtext}}</span>
    </div>

    <el-select
      v-model="value"
      placeholder="仓库筛选"
      class="select"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div
      :id="roseData.id"
      style="width: 810px;height: 334px;background: #f4f5f7;border-radius: 8px;"
    ></div>

  </div>
</template>
<script>
export default {
  name: "roseEchars",
  props: {
    roseData: {
      type: Object,
    },
  },
  data() {
    return {
      titleId: 1,
      options: [
        {
          value: "选项1",
          label: "A仓库",
        },
        {
          value: "选项2",
          label: "B仓库",
        },
        {
          value: "选项3",
          label: "C仓库",
        },
      ],
      value: "",
    };
  },
  methods: {
    dianji(id) {
      this.titleId = id;
    },
    drawLine() {
      console.log(this.roseData.subtext);
      let echarts = this.$echarts.init(
        document.getElementById(this.roseData.id)
      );
      echarts.setOption({
        series: {
          type: "pie",
          radius: [20, 110],
          center: ["50%", "60%"],
          roseType: "area",
          label: {
            formatter: this.roseData.formatter,
            rich: {
              per: {
                color: "#999999",
                fontSize: 14,
                fontFamily: "MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei",
                fontWeight: "normal",
              },
              ng: {
                color: "#626466",
                fontSize: 24,
                fontFamily: "DINCond, DINCond-Bold",
                fontWeight: 700,
              },
              //指导线后面的小圆点
              hr: {
                //auto自定义
                backgroundColor: "auto",
                borderRadius: 3,
                width: 3,
                height: 3,
                padding: [3, 3, 0, -12],
              },
            },
          },
          labelLine: {
            length: 5,
            length2: 5,
          },
          data: this.roseData.data,
        },
      });
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style>
.el-input--suffix .el-input__inner {
  padding-right: 10px;
  width: 100px;
  height: 24px;
}
.el-input__icon {
  line-height: 24px;
}
.select {
  position: absolute;
  top: 20px;
  left: 698px;
  z-index: 1;
}
#title {
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}
#title > span:nth-child(1) {
  height: 24px;
  font-size: 18px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  color: #939699;
  line-height: 24px;
  margin-right: 16px;
  cursor: pointer;
}
#title > span:nth-child(2) {
  height: 24px;
  font-size: 18px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;
  font-weight: 700;
  color: #000000;
  line-height: 24px;
  cursor: pointer;
}
</style>
